<template>
  <div>
    <citySearch class="topSearch" v-if="isShow"></citySearch>
    <div v-if="isShow" class="mian">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" touchable:true>
        <van-swipe-item v-for="image in images" :key="image.id">
          <img v-lazy="img + image.imgSrc" @click="refresh" />
        </van-swipe-item>
      </van-swipe>
      <!-- 导航菜单 -->
      <van-grid :column-num="4">
        <van-grid-item icon="wap-home" text="整租" to="/list" />
        <van-grid-item icon="friends" text="合租" />
        <van-grid-item icon="map-marked" text="地图找房" />
        <van-grid-item icon="wap-home" text="去出租" to="/rend" />
      </van-grid>
      <!-- 租房小组--根据定位的不同城市展示对应的列表 -->
      <div class="group">
        <div class="group-title">
          <h3>租房小组</h3>
          <p>更多</p>
        </div>
        <van-row gutter="15">
          <van-col span="12" v-for="list in rentList" :key="list.id" to="/">
            <div class="groupList">
              <div class="left"><img :src="img + list.imgSrc" alt="" /></div>
              <div class="right">
                <span>{{ list.title }}</span>
                <br />
                <span>{{ list.desc }}</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- <div><router-view></router-view></div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
import citySearch from "@/components/citySearch.vue";
import { SwiperApis, GroupsApis, NewsApis } from "@/api/home";
export default {
  name: "home-page",
  components: {
    citySearch,
  },
  async created() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    try {
      const res = await SwiperApis();
      this.images = res.body;
    } catch (err) {
      console.log(err);
    }
    try {
      const res = await GroupsApis();
      this.rentList = res.body;
    } catch (err) {
      console.log(err);
    }
    try {
      const res = await NewsApis();
      this.newsList = res.body;
    } catch (err) {
      console.log(err);
    }
  },
  data() {
    return {
      active: "/home",
      isShow: false,
      images: [], // 轮播图
      img: "http://liufusong.top:8080",
      rentList: [], // 租房小组
      newsList: [], // 最新资讯列表
    };
  },
  methods: {
    refresh() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.reload();
    },
  },
  computed: {},
  watch: {
    // 1.实时监听路由的状态--如果路由发生改变重新赋值给路由的active
    // 打开页面立即监听
    "$route.path": {
      handler(val) {
        this.active = val;
        // 1.2里面v-if控制页面因为home页面既要显示内容又要显示二级路由
        if (val === "/home") {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped lang="less">
.mian {
  position: relative;
  padding-bottom: 52px;
}
.topSearch {
  position: absolute;
  z-index: 1;
  top: 25px;
  padding: 0 10px;
}
.van-tabbar-item {
  font-size: 10px;
}
.van-swipe .van-swipe__track .van-swipe-item {
  height: 212px;
}
.van-swipe-item img {
  height: 100%;
}
.van-grid {
  color: #2fbd82;
}
.van-grid-item span {
  font-size: 14px;
  color: #333;
  margin-top: 7px;
}
.van-grid-item {
  background-color: #fff;
}
.group {
  padding: 0 10px;
}
.group-title {
  color: #333;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
}
.groupList {
  width: 172px;
  height: 60px;
  background-color: #fff;
  margin-bottom: 8px;
  display: flex;
  font-size: 14px;
  border-radius: 5px;
  color: #333;
}
.groupList .left img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}
.groupList .right {
  padding: 10px 0;
}
</style>
